<template>
	<view class="serviceBox">
		<up-sticky>
		<Header></Header>
		</up-sticky>
		<view class="boxOne">
			<view class="boxOne-title">
				小佰服务保障
			</view>
			<view class="boxOne-text">
				用科技，智能，服务为客户提供解决方案，助理企业快速发展
			</view>
			<view class="boxOne-bott" @click="handleShowSignup">
				申请试用
			</view>
		</view>
		<view class="boxTwo">
			<view class="boxTwo-Title">
				专属服务团队
			</view>
			<view class="boxTwoContent">

				<view class="Content-item">
					<image src="../../static/servicrImg/serviceImg2.png" mode=""></image>
					<view class="img-Text">
						产品全优配置
					</view>
				</view>
				<view class="Content-item">
					<image src="../../static/servicrImg/serviceImg3.png" mode=""></image>
					<view class="img-Text">
						专属客服对接
					</view>
				</view>
				<view class="Content-item">
					<image src="../../static/servicrImg/serviceImg4.png" mode=""></image>
					<view class="img-Text">
						系统搭建完善
					</view>
				</view>
				<view class="Content-item">
					<image src="../../static/servicrImg/serviceImg5.png" mode=""></image>
					<view class="img-Text">
						7X24小时售后
					</view>
				</view>
				<view class="Content-item">
					<image src="../../static/servicrImg/serviceImg6.png" mode=""></image>
					<view class="img-Text">
						产品试用培训
					</view>
				</view>
				<view class="Content-item">
					<image src="../../static/servicrImg/serviceImg7.png" mode=""></image>
					<view class="img-Text">
						系统维护优化
					</view>
				</view>
			</view>
		</view>

		<view class="boxThree">
			<view class="boxThree-title">
				品牌优势
			</view>
			<view class="boxThreeContent">
				<view class="Content-item">
					<view class="Content-itemBox">
						<view class="item-img">
							<image src="../../static/servicrImg/serviceImg8.png" mode=""></image>
						</view>
						<view class="item-title">
							行业优势
						</view>
						<view class="item-textBox">
							<view class="item-text">
								国际领先
							</view>
							<view class="item-text">
								语音识别系统
							</view>
						</view>
					</view>
				</view>
				<view class="Content-item">
					<view class="Content-itemBox">
						<view class="item-img">
							<image src="../../static/servicrImg/serviceImg9.png" mode="aspectFit"></image>
						</view>
						<view class="item-title">
							技术优势
						</view>
						<view class="item-textBox">
							<view class="item-text">
								自主研发技术支持
							</view>
						</view>
					</view>
				</view>
				<view class="Content-item">
					<view class="Content-itemBox">
						<view class="item-img">
							<image src="../../static/servicrImg/serviceImg10.png" mode=""></image>
						</view>
						<view class="item-title">
							服务优势
						</view>
						<view class="item-textBox">
							<view class="item-text">
								区域运营中心服务
							</view>
							<view class="item-text">
								7x24小时响应
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="boxFour">
			<view class="boxFour-title">
				加盟合作
			</view>
			<view class="boxFourContent">
				<view class="Content-item item1">
					<view class="item-top">
						总部支撑
					</view>
					<view class="item-bott">
						<view class="">
							总部团队支持
						</view>
						<view class="">
							免除后顾之忧
						</view>
					</view>
				</view>
				<view class="Content-item item2">
					<view class="item-top">
						培训支持
					</view>
					<view class="item-bott">
						<view class="">
							售前培训
						</view>
						<view class="">
							售中培训
						</view>
						<view class="">
							售后服务
						</view>
					</view>
				</view>
				<view class="Content-item item3">
					<view class="item-top">
						全程无忧
					</view>
					<view class="item-bott">
						无忧市场与售后
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
		
		<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
			showCancelButton cancelText="取消" confirmText="立即拨打">
			<view class="hello">
			    <view class="iconfont fa-bodadianhua"></view>
			    <view>电话联系:</view>
			    <view>13261388898</view>
			  </view>
		</up-modal>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref
	} from 'vue'
		import api from '../../utils/request.js'
	const showSignUp = ref(false)
	const SignUpForm = ref({
		name: "",
		phone: ""
	})
	const uToastRef = ref(null)
	const signRefForm = ref(null)
	const handleShowSignup = function() {
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
		        phoneNumber: '13261388898', // 电话号码
		        success: function () {
		          console.log('拨打电话成功');
		        },
		        fail: function () {
		          console.log('拨打电话失败');
		        }
		      });
	
	}
</script>

<style lang="scss" scoped>
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}
	
	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}
	:deep(.u-input__content__field-wrapper__field){
		height: 0;
	}
	:deep(.u-modal__button-group__wrapper__text){
		font-size: 28rpx;
	}
	:deep(.u-modal__title){
		font-size: 28rpx;
	}
	.hello {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  font-size: 16px;
	  .fa-bodadianhua {
	    color: #006bec;
	  }
	}
	.serviceBox {
		width: 100%;
		height: 100%;

		.boxOne {
			height: 427rpx;
			background-image: url('../../static/servicrImg/serviceImg1.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 47rpx;

			.boxOne-title {
				font-size: 75rpx;
				font-weight: 600;
			}

			.boxOne-text {
				font-size: 24rpx;
				font-weight: 500;
			}

			.boxOne-bott {
				font-size: 30rpx;
				font-weight: 500;
				width: 182rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				background-color: #fff;
				border-radius: 16rpx;
			}
		}

		.boxTwo {
			height: 881rpx;

			.boxTwo-Title {
				height: 165rpx;
				line-height: 165rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxTwoContent {
				height: calc(100% - 165rpx);
				padding: 0 35rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 26rpx;

				.Content-item {
					height: calc(33.3% - 26rpx);
					width: calc(50% - 26rpx);
					border: 1rpx solid #eee;
					border-radius: 16rpx;
					box-shadow: 0 0 15rpx #ccc;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 18rpx;

					image {
						width:95rpx;
						height: 100rpx;
					}

					.img-Text {
						font-size: 29rpx;
					}
				}
			}
		}

		.boxThree {
			height: 633rpx;

			.boxThree-title {
				height: 165rpx;
				line-height: 165rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxThreeContent {
				height: calc(100% - 165rpx);
				background-image: url('../../static/servicrImg/serviceImg14.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: 60% center;
				padding: 42rpx;
				display: flex;
				gap: 16rpx;

				.Content-item {
					height: calc(100% - 84rpx);
					width: calc(33.3% - 16rpx);

					.Content-itemBox {
						height: calc(100% - 1rpx);
						border-radius: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: center;
						background-color: #fefefe;

						.item-img {
							width: 175rpx;
							height: 165rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.item-textBox {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-weight: 500;
							font-size: 22rpx;
						}

						.item-title {
							color: #3a60a5;
							font-weight: 600;
							font-size: 29rpx;
						}
					}

				}
			}
		}
		
		.boxFour {
			height: 512rpx;
			background-color: #fafafa;
			.boxFour-title {
				height: 174rpx;
				line-height: 174rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}
			.boxFourContent {
				padding: 0 22rpx;
				height: calc(100% - 174rpx);
				display: flex;
				gap: 39rpx;
				.Content-item {
					width: calc(33.3% - 1rpx);
					height: 200rpx;
					border: 1rpx solid #eee;
					border-radius: 16rpx;
					box-shadow: 0 0 15rpx #eee;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 18rpx;
					.item-top {
						font-size: 34rpx;
						font-weight: 600;
					}
					.item-bott {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 22rpx;
						color: #525152;
					}
				}
				.item1 {
					background-image: url('../../static/servicrImg/serviceImg11.png');
					background-repeat: no-repeat;
					background-size: 120%;
					background-position: center center;
				}
				.item2 {
					background-image: url('../../static/servicrImg/serviceImg12.png');
					background-repeat: no-repeat;
					background-size: 120%;
					background-position: center center;
				}
				.item3 {
					background-image: url('../../static/servicrImg/serviceImg13.png');
					background-repeat: no-repeat;
					background-size: 120%;
					background-position: center center;
				}
			}
		}
	}
</style>